<template>
    <el-tabs ref="tabs" v-model="activeName" type="card" tab-position="left" class="mytab">
        <el-tab-pane v-for="item in data" :key="item.name" :lazy="true" :label="item.name" :name="item.name">
            <span>服务器路径：{{ item.filePath }}</span>
            <el-button type="primary" align="right" @click="savefile(item)">保存</el-button>
            <MonacoEditor v-model="item.content" :language="item.language" class="editor" @editorDidMount="editorDidMount" @saveDocToServer="savefile(item)" />
            <!-- <MonacoEditor v-model="item.content" /> -->
        </el-tab-pane>
    </el-tabs>

    <!-- <MonacoEditor
  language="javascript"
  :diffEditor="true"
  :value="code"
  :original="originalCode"
/> -->
</template>

<script>
import { generator, savepreviewfile } from '@/api/generator/generator'
// import MonacoEditor from 'vue-monaco'
import MonacoEditor from '@/components/Editor/myVueMonaco'

// options: The second argument of monaco.editor.create.
// value: A shortcut to set options.value.
// theme: A shortcut to set options.theme.
// language: A shortcut to set options.language.
// amdRequire: Load monaco-editor using given amd-style require function.
// diffEditor: boolean Indicate that this is a DiffEditor, false by default.

const options = {
  selectOnLineNumbers: true,
  lineWrapping: true, // 代码折叠
  foldGutter: true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
  matchBrackets: true, // 括号匹配
  roundedSelection: false,
  // readOnly: this.readOnly, // 只读
  cursorStyle: 'line', // 光标样式
  automaticLayout: true, // 自动布局
  glyphMargin: true, // 字形边缘
  useTabStops: false,
  fontSize: 28, // 字体大小
  autoIndent: true, // 自动布局
  showFoldingControls: 'always',
  language: 'java'
}

export default {
  name: 'Preview',
  components: { MonacoEditor },
  data() {
    return {
      data: null,
      height: '',
      activeName: 'index'
    }
  },
  created() {
    this.height = document.documentElement.clientHeight - 180 + 'px'
    const tableName = this.$route.params.tableName
    generator(tableName, 1)
      .then(data => {
        this.data = data
        this.activeName = data[0].name
      })
      .catch(() => {
        this.$router.go(-1)
      })
  },
  methods: {
    editorDidMount(editor) {
      // Listen to `scroll` event
      editor.onDidScrollChange(e => {
        // console.log(e)
      })
    },
    savefile(data) {
      savepreviewfile(data)
        .then(data => {
          this.$notify.success({
            title: '已保存',
            message: data.filePath
          })
        })
        .catch(e => {
          this.$notify.error({
            title: '保存文件',
            message: e
          })
        })
    }
  }
}
</script>
<style>
.editor {
    /* position: absolute; */
    /* left: 0;
    top: 0; */
    width: calc(100%);
    height: calc(100vh - 150px);
    /* max-height: 100% !important;
    min-height: 100% !important;
    margin: 0;
    padding: 0;*/
    overflow: hidden !important;
}
.mytab {
    box-sizing: border-box;
    background: yellowgreen;
    width: 100%;
    height: 100% !important;
    display: block;
    position: relative;
    overflow: hidden !important;
}
</style>
